<?xml version="1.0" encoding="UTF-8" ?>
<%@page import="javax.servlet.jsp.jstl.fmt.LocalizationContext"%>
<%@page import="java.util.ResourceBundle"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Set"%>
<%@ page import="org.jakim.entity.*"%>
<%@ page import="org.jakim.utils.*"%>
<%@page import="org.apache.taglibs.standard.tlv.JstlCoreTLV"%>
<%@page import="org.apache.taglibs.standard.tlv.JstlFmtTLV"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<fmt:setLocale value="en" />
<fmt:setBundle basename="org.jakim.messages.messages" var="msg"
	scope="session" />
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<link href="../styles/main.css" rel="stylesheet" type="text/css" />
<link href="../styles/wizard.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript">

$(function() {
    $( "#modalForm" ).dialog({
		autoOpen: false,
		title: 'Dialog Title',
		height: 'auto',
		width: 'auto',
		modal: true,
		show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
 
    $( "#addButton" ).click(function() {
      $( "#modalForm" ).dialog( "open" );
    });
  });
  
</script>

</head>
<body>
	<%
		HttpSession httpSeesion = request.getSession();
		
		Set<Language> listLanguage = null;
		PersonalSkill personalSkills = null;
		
		Object objPersonalSkills = httpSeesion.getAttribute("attrPersonalSkills");
	
		if(objPersonalSkills != null && objPersonalSkills instanceof PersonalSkill){
			personalSkills = (PersonalSkill) objPersonalSkills;
			listLanguage =personalSkills.getOtherLanguages();
	    }else{
	    	personalSkills = new PersonalSkill();
	    }
	%>
	<div id="divBodyContainer">
		<h1>
			<fmt:message key="LANGUAGE.HEADER" />
		</h1>

		<p>
			<fmt:message key="LANGUAGE.SUMMARY" />
		</p>

		<button id="addButton">
			<fmt:message key="LANGUAGE.ADDLANUAGE.BUTTON" />
		</button>

		<div class="wizardHistoryBody">
			<%
                if (personalSkills.getMotherLanguage() != null && listLanguage != null){
             %>
			<table id="addedLanguages" class="userEntriesTable">
				<tr>
					<th><fmt:message key="LANGUAGE.TABLE.HEADER.LABEL" /></th>
				</tr>

				<tr>
					<td class="colParam"><fmt:message
							key="LANGUAGE.TABLE.MOTHERLANGUAGE.LABEL" />:</td>
					<td class="colValue"><%=personalSkills.getMotherLanguage() %></td>
				</tr>

				<tr>
					<td colspan="2">
						<hr />
					</td>
				</tr>

				<% for(Language language: personalSkills.getOtherLanguages()){ %>

				<tr>
					<td class="colParam"><fmt:message
							key="LANGUAGE.TABLE.LANGUAGE.NAME.LABEL" />:</td>
					<td class="colValue"><%=language.getLanguageName() %></td>
				</tr>

				<tr>
					<td class="colParam" colspan="2"><b><fmt:message
								key="LANGUAGE.TABLE.LANGUAGE.UNDERSTANDING.LABEL" /></b></td>
				</tr>

				<tr>
					<td class="colParam"><fmt:message
							key="LANGUAGE.TABLE.LANGUAGE.LISTENING.LABEL" />:</td>
					<td class="colValue"><%=language.getLanguageListening() %></td>
				</tr>

				<tr>
					<td class="colParam"><fmt:message
							key="LANGUAGE.TABLE.LANGUAGE.READING.LABEL" />:</td>
					<td class="colValue"><%=language.getLanguageReading() %></td>
				</tr>

				<tr>
					<td class="colParam" colspan="2"><b><fmt:message
								key="LANGUAGE.TABLE.SPEAKING.LABEL" /></b></td>
				</tr>

				<tr>
					<td class="colParam"><fmt:message
							key="LANGUAGE.TABLE.LANGUAGE.INTERACTION.LABEL" />:</td>
					<td class="colValue"><%=language.getLanguageInteraction() %></td>
				</tr>

				<tr>
					<td class="colParam"><fmt:message
							key="LANGUAGE.TABLE.LANGUAGE.PRODUCTION.LABEL" />:</td>
					<td class="colValue"><%=language.getLanguageProduction() %></td>
				</tr>

				<tr>
					<td class="colParam"><fmt:message
							key="LANGUAGE.TABLE.LANGUAGE.WRITING.LABEL" />:</td>
					<td class="colValue"><%=language.getLanguageWriting() %></td>
				</tr>

				<%
                        }
                        %>
			</table>
			<%
                }
            %>

		</div>

		<div id="shade"></div>
		<div id="modalForm">
			<form id="formLanguages" class="formExperience" action="../addinfo"
				method="post">
				<fieldset id="fsetMotherLanguage" class="fsetWizard">
					<legend>
						<fmt:message key="LANGUAGE.FORM.MOTHERLANGUAGE.LABEL" />
						:
					</legend>

					<div id="divMotherLanguages">
						<label id="lblMotherLanguage" for="txtMotherLanguage"> <fmt:message
								key="LANGUAGE.FORM.MOTHERLANGUAGE.LANGUAGENAME.LABEL" />:
						</label>
							<% 
								if((personalSkills.getMotherLanguage() != null) && (!personalSkills.getMotherLanguage().isEmpty())){
							%>
								<div><%=personalSkills.getMotherLanguage() %></div>
							<%
								}else{
							%> 
							<input type="text" id="txtMotherLanguage"name="motherLanguageName" />	
							<%
								}
							%>
					</div>

				</fieldset>

				<p>&nbsp;</p>

				<fieldset id="fsetLanguage" class="fsetWizard">
					<legend>
						<fmt:message key="LANGUAGE.FORM.LANGUAGE.LABEL" />
						:
					</legend>

					<div id="divLanguage">
						<label id="lblLanguage" for="txtLanguage"> <fmt:message
								key="LANGUAGE.FORM.LANGUAGE.LANGUAGENAME.LABEL" />:
						</label> <input type="text" id="txtLanguage" name="languageName"
							maxlength="35" />
					</div>
					<div id="divUnderstanding">
						<label id="lblUnderstanding" class="WizardSection"> <fmt:message
								key="LANGUAGE.FORM.LANGUAGE.UNDERSTANDING.LABEL" />:
						</label>

						<div id="divListening">
							<label id="lblListening" for="cbListening"> <fmt:message
									key="LANGUAGE.FORM.LANGUAGE.LISTENING.LABEL" />:
							</label> <select id="cbListening" name="languageListening">
								<% 
	                            		ResourceBundle res = ((LocalizationContext)session.getAttribute("msg")).getResourceBundle();
                                    	for(CLevels cLevel: CLevels.values()){
                                    		out.write("<option value='" + cLevel.name() + 
                                                 "'>" + res.getString("CLEVEL.OPTION." + cLevel.name()) + 
                                                 "</option>"); 
                                    	}
	                            	%>
							</select>
						</div>

						<div id="divReading">
							<label id="lblReading" for="cbReading"> <fmt:message
									key="LANGUAGE.FORM.LANGUAGE.READING.LABEL" />:
							</label> <select id="cbReading" name="languageReading">
								<% 
                                    	for(CLevels cLevel: CLevels.values()){
                                    		out.write("<option value='" + cLevel.name() + 
                                                 "'>" + res.getString("CLEVEL.OPTION." + cLevel.name()) + 
                                                 "</option>"); 
                                    	}
	                            	%>
							</select>
						</div>
					</div>

					<div id="divSpeaking">
						<label id="lblSpeaking" class="WizardSection"> <fmt:message
								key="LANGUAGE.FORM.LANGUAGE.SPEAKING.LABEL" />:
						</label>

						<div id="divInteraction">
							<label id="lblInteraction" for="cbInteraction"> <fmt:message
									key="LANGUAGE.FORM.LANGUAGE.INTERACTION.LABEL" />:
							</label> <select id="cbInteraction" name="languageInteraction">
								<% 
                                    	for(CLevels cLevel: CLevels.values()){
                                    		out.write("<option value='" + cLevel.name() + 
                                                 "'>" + res.getString("CLEVEL.OPTION." + cLevel.name()) + 
                                                 "</option>"); 
                                    	}
	                            	%>
							</select>
						</div>

						<div id="divProduction">
							<label id="lblProduction" for="cbProduction"> <fmt:message
									key="LANGUAGE.FORM.LANGUAGE.PRODUCTION.LABEL" />:
							</label> <select id="cbProduction" name="languageProduction">
								<% 
                                    for(CLevels cLevel: CLevels.values()){
                                    	 out.write("<option value='" + cLevel.name() + 
                                                 "'>" + res.getString("CLEVEL.OPTION." + cLevel.name()) + 
                                                 "</option>"); 
                                    }
	                            %>
							</select>
						</div>

						<div id="divWriting">
							<label id="lblWriting" for="cbWriting"> <fmt:message
									key="LANGUAGE.FORM.LANGUAGE.WRITING.LABEL" />:
							</label> <select id="cbWriting" name="languageWriting">
								<%
                                    	for(CLevels cLevel: CLevels.values()){
                                    		out.write("<option value='" + cLevel.name() + 
                                                 "'>" + res.getString("CLEVEL.OPTION." + cLevel.name()) + 
                                                 "</option>"); 
                                    	}
	                            	%>
							</select>
						</div>
					</div>

					<input type="hidden" value="4" name="numberCVWizardStep" />
				</fieldset>

				<button type="submit">
					<fmt:message key="SUBMIT.BUTTON" />
				</button>
			</form>
		</div>
		<button id="next"
			onclick="window.location.href = 'additionalinformationwizard.jsp'">
			<fmt:message key="NEXT.BUTTON" />
		</button>
	</div>
</body>
</html>